<template>
  <div>
    <TopSwiper :tops='tops'></TopSwiper> 
    <Card v-for='book in booklist'
      :key='book.id'
      :book='book'></Card>
    <p class="text-footer"
      v-if='!more'>
      没有更多数据...
    </p>
  </div>
</template>

<script>
import { get } from '@/util'
import Card from '@/components/Card'
import TopSwiper from '@/components/TopSwiper'
export default {
  data () {
    return {
      booklist: [],
      page: 0,
      more: false,
      tops: []
    }
  },
  methods: {
    async getList (init) {
      if (init) {
        this.page = 0
        this.more = true
      }
      wx.showNavigationBarLoading()
      const books = await get('/weapp/booklist', { page: this.page })
      if (books.list.length < 10 && this.page > 0) {
        this.more = false
      }

      if (init) {
        this.booklist = books.list
        wx.stopPullDownRefresh()
      } else {
        // 下拉刷新不能直接覆盖bookslist要累加
        this.booklist = [...this.booklist, ...books.list]
      }
      wx.hideNavigationBarLoading()
    },
    async getTop () {
      const tops = await get('/weapp/top')
      this.tops = tops.list
    }
  },
  onPullDownRefresh () {
    this.getList(true)
    this.getTop()
  },
  onReachBottom () {
    if (!this.more) {
      return false
    }
    this.page++
    this.getList()
  },
  mounted () {
    this.getList(true)
    this.getTop()
  },
  components: {
    Card,
    TopSwiper
  }
}
</script>

<style>
</style>
